<?php
/*
Template Name: 全新②号VIP介绍页
*/
get_header();
$top_bg = _van('two_vip_bg');
$top_img = _van('two_vip_img');
$vip_js = _van('two_vip_js');
 $i = 0;
//新VIP介绍页CSS
wp_enqueue_style('new_two_vip', trailingslashit(get_stylesheet_directory_uri()) . 'assets/css/pages/new_two_vip.css?van_ver=' . VAN_VER);
?>
<!--头部标题-->
<div class="banner" style="background:url(<?php echo $top_bg; ?>) 50% no-repeat;padding-bottom: 2px;
    background-size: cover;">
	<div class="container">
		<div class="row align-items-center justify-content-between">
			<div class="col-xl-6 col-lg-6 col-md-6">
				<?php foreach($vip_js as $key => $value): ?>
				    <div class="banner-txt">
					<h4><?php echo $value['brief']; ?></h4>
					<h1><?php echo $value['title_one']; ?><span><?php echo $value['title_two']; ?></span></h1>
					<p><?php echo $value['desc']; ?></p>
					<div class="btn-box">
						<a href="<?php echo $value['one_button_link']; ?>" target="_blank" class="left-btn"><?php echo $value['one_button_title']; ?></a>
						<a href="<?php echo $value['two_button_link']; ?>" target="_blank" class="right-btn"><?php echo $value['two_button_title']; ?></a>
					</div>
				<?php endforeach; ?>
				</div>
			</div>
			<div class="col-xl-6 col-lg-6 col-md-6">
				<div class="part-img">
					<img src="<?php echo $top_img; ?>" alt="image">
				</div>
			</div>
		</div>
			
	</div>
</div>
<!--会员价格-->
<div class="container">
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
  <h2 class="display-4"><?php echo _van('two_vip_js_title'); ?></h2>
  <p class="lead"><?php echo _van('two_vip_js_desc'); ?></p>
</div>
	<div class="row">
		<?php foreach(_van('two_vip_tc') as $key => $value): ?>
		<div class="col-lg-3 col-md-6">
			<div class="pricingTable">
				<div class="pricingTable-header" style="background-image: linear-gradient(120deg, <?php echo $value['one_bg_color']; ?>, <?php echo $value['two_bg_color']; ?>);">
					<div class="price-value"><?php echo $value['title']; ?></div>
				</div>
				<h3 class="heading">￥<?php echo $value['price']; ?></h3>
				<div class="pricing-content">
					<ul><?php echo $value['privilege_desc']; ?></ul>
				</div>
				<div class="pricingTable-signup">
					<a style="background-image: linear-gradient(120deg, <?php echo $value['one_bg_color']; ?>, <?php echo $value['two_bg_color']; ?>);" href="<?php echo $value['button_link']; ?>"><?php echo $value['button_title']; ?></a>
				</div>
			</div>
		</div>
		<?php endforeach; ?>
	</div>
</div>
<!--会员差异-->
<div class="container">
		<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
  <h2 class="display-4"><?php echo _van('two_vip_tq_title'); ?></h2>
  <p class="lead"><?php echo _van('two_vip_tq_desc'); ?></p>
</div>
		<div class="row">
		    <?php foreach(_van('two_vip_tq') as $key => $value): ?>
			<div class="col-lg-4 col-md-6">
				<div class="work-card">
					<span class="work-card__icon"><img src="<?php echo $value['img']; ?>"></span>
					<span class="work-card__count-number"><?php echo $value['number']; ?></span>
					<h2 class="work-card__title text--body-1"><?php echo $value['title']; ?></h2>
					<p class="work-card__description text--body-3"><?php echo $value['desc']; ?></p>
				</div>
			</div>
			<?php endforeach; ?>
		</div>
	</div>
<!--FQA说明-->
<div class="container">
	<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
		<h2 class="display-4"><?php echo _van('two_vip_faq_title'); ?></h2>
		<p class="lead"><?php echo _van('two_vip_faq_desc'); ?></p>
	</div>
	<div class="row">
		<div class="col-lg-8">
			<div class="cardify faq_module">
				<div class="faq-title">
					<h4><?php echo _van('two_vip_faq_title'); ?></h4>
				</div>
				<div class="faqs">
					<div class="panel-group accordion" role="tablist" id="accordion">
					    <?php foreach(_van('two_vip_faq') as $key => $value):
					        $i++;
					    ?>
						<div class="panel accordion__single" id="panel-<?php echo $i; ?>">
							<div class="single_acco_title">
								<h4>
									<a data-toggle="collapse" href="#collapse<?php echo $i; ?>" class="collapsed" aria-expanded="false" data-target="#collapse<?php echo $i; ?>" aria-controls="collapse<?php echo $i; ?>">
										<span><?php echo $value['title']; ?></span>
										<i class="fa fa-angle-down"></i>
									</a>
								</h4>
							</div>
							<div id="collapse<?php echo $i; ?>" class="panel-collapse collapse" aria-labelledby="panel-<?php echo $i; ?>" data-parent="#accordion">
								<div class="panel-body">
									<p><?php echo $value['desc']; ?></p>
								</div>
							</div>
						</div>
						<?php endforeach; ?>
					</div>
				</div>
			</div>
		</div>
		<div class="col-lg-4">
			<aside class="sidebar faq--sidebar">
				<div class="sidebar-card faq--card">
					<div class="faq-title">
						<h4><?php echo _van('two_right_vip_faq_title'); ?></h4>
					</div>
					<div class="collapsible-content">
						<ul class="card-content">
						    <?php foreach(_van('two_right_vip_faq') as $key =>$value):?>
							<li>
								<a href="#">
									<span></span><?php echo $value['title']; ?>
								</a>
							</li>
							<?php endforeach; ?>
						</ul>
						<a href="<?php echo _van('two_right_vip_faq_button_link'); ?>" class="btns btns--round btns--sm btns--faq"><?php echo _van('two_right_vip_faq_button'); ?></a>
					</div>
				</div>
			</aside>
		</div>
	</div>
</div>
<?php get_footer(); ?>